import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import style from '@/styles/components/echarts.module.less';
import * as echarts from 'echarts';

@Component({})
export default class Temperature extends Vue {
  @Prop({ default: [] }) private x!: string[];
  @Prop({ default: [] }) private y!: number[];

  private myChart: echarts.ECharts | null = null;

  @Watch('x.length')
  watchX() {
    this.draw();
  }

  public mounted() {
    this.myChart = echarts.init(document.getElementById('temperature')!);
    this.draw();
  }

  public render() {
    return <div id='temperature' class={style['temperature']}></div>;
  }

  private draw() {
    // 绘制图表
    console.log(this.x)
    console.log(this.y)
    if (!this.myChart) {
      return this.$message.error('页面出现未知错误，请退出重试！');
    }
    this.myChart.setOption({
      color: ['#FFBF00'],
      // title: {
      //   text: '24小时温度变化'
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: this.x
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '室温',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(224, 62, 76)'
              },
              {
                offset: 1,
                color: 'rgba(255, 191, 0)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: this.y
        }
      ]
    });
  }
}
